<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>collect</title>
    <style>
        #y1 ul {
            list-style: none;
        }


        #y1 ul li {
            padding: 10px;
            font-size: 14px;

            /* background:red; */
        }




        body a {
            color: black;
        }

        body a:hover {
            text-decoration: none;
            color: grey;
        }

        #ula li a {
            color: black;
        }

        #header {
            height: 100px;
            /* border: 1px solid#e2e2e2; */
        }

        #dao li a {
            font-size: 18px;
            color: white;
        }

        ul.nav-tabs {
            width: 180px;
            /* margin-top: 20px; */

        }

        /* ul.nav-tabs{
            background:yellowgreen;
        }
        */

        ul.nav-tabs li a {
            color: #008FF4;
        }

        ul.nav-tabs li a:link {
            color: #008FF4;
        }

        ul.nav-tabs li a:active {
            color: red;

            /* color:white; */

        }

        ul.nav-tabs li a:hover {
            color: white;
            background: #008FF4;
            /* color:white; */

        }





        /* 
        ul.nav-tabs.affix {
            top: 30px;
        } */


        /* 链接 */
        #forth {
            /* border: 1px solid red; */
            height: 200px;
            margin-top: 500px;
            background-color: black;
        }

        #forth-left {
            width: 300px;
            /* border: 1px solid blue; */
            margin-left: 150px;
            padding: 50px;
            float: left;
        }

        #forth-left-p {
            font-size: 30px;
            color: blue;

        }

        #forth-middle {
            width: 600px;
            /* border: 1px solid black; */

            float: left;
        }

        #forth-middle li {
            list-style: none;

        }

        #forth-middle ul {
            padding: 0;
        }

        #forth-middle a {
            text-decoration: none;
            color: white;
            display: block;
        }

        #forth-middle>ul {
            padding: 35px;
            float: left;
        }

        #forth-right {

            width: 400px;
            /* border: 1px solid red; */
            float: left;
        }
    </style>

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

    <div id="header">


    </div>


    <div>
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div>
                    <ul class="nav navbar-nav" style="margin-left:10%;" id="dao">
                        <li><a href="#">我的主页</a></li>
                        <li><a href="#">发票管理</a></li>
                        <li><a href="#">收藏管理</a></li>
                        <li><a href="#">设置</a></li>
                    </ul>
                </div>
            </div>
        </nav>

    </div>

    <div>
        <div id="left" style="width: 15%;margin-left: 10%;float: left;">
            <div class="container">
                <div>
                    <!-- data-spy="affix"data-spy="affix" -->
                    <!-- class="col-xs-3" -->
                    <ul class="nav nav-tabs">
                        <li><a href="#">我收藏的用户</a></li>
                        <li><a href="#">我收藏的服务</a></li>
                        <li><a href="#">我收藏的需求</a></li>
                    </ul>
                </div>
            </div>







        </div>

        <div id="right" style="margin-top:10px;width: 65%; float:right;margin-right:8%;border:1px solid grey;">
            <div>
                <div style="margin-left:2%;margin-top:10%;">
                    <a href="#"><input type="checkbox"  name="cks">&nbsp;&nbsp;<span class="glyphicon glyphicon-trash"></span></a>
                </div>
                <div style="margin-left:8%;margin-top:-10%;border: 1px solid grey;width:90%;">
                    <div class="media-left media-top">
                        <img src="../../imgs/touxiang.jpg" class="media-object" style="width: 120px;
                        height: 120px;
                        border-radius: 50%;
                        padding: 15px;">
                    </div>
                    <div class="media-body">
                        <span>
                            <p style="padding-top:25px;font-size:20px;">
                                孙加田
                            </p>
                            <p style="margin-left:70px;margin-top:-30px;">
                                <a href="#" style="color:rgb(0, 140, 255);">添加备注</a>
                            </p>
                        </span>
                        <p>江苏省苏州市</a></p>
                        <p>给力度：6.53/10 | 靠谱度：60.86%</a></p>
                        <div style="margin-top:-75px;margin-left:35%;">
                            <span>
                                <div class="form-control" style="width:150px;margin-left:50px;">
                                    <p style="color:rgb(0, 140, 255);padding-left:8px;">
                                        <button style="border:0px;background:white;">查看需求方主页</button></p>
                                    </p>
                                    </p>
                                </div>&nbsp;&nbsp;
                                <div class="form-control"
                                    style="background-color:rgb(0, 140, 255);width:150px;margin-left:55%;margin-top:-13%;">
                                    <p style="color:white;padding-left:8px;padding-top:-3px;">
                                        <button style="border:0px;background:rgb(0, 140, 255);">查看需求方主页</button></p>
                                    </p>
                                </div>
                            </span>
                        </div>

                    </div>
                </div>
            </div>


            <div>
                <div style="margin-left:2%;margin-top:10%;">
                    <a href="#"> <input type="checkbox"  name="cks">&nbsp;&nbsp;<span class="glyphicon glyphicon-trash"></span></a>
                </div>
                <div style="margin-left:8%;margin-top:-10%;border: 1px solid grey;width:90%;">
                    <div class="media-left media-top">
                        <img src="../../imgs/index_head.PNG" class="media-object" style="width: 120px;
                        height: 120px;
                        border-radius: 50%;
                        padding: 15px;">
                    </div>
                    <div class="media-body">
                        <span>
                            <p style="padding-top:25px;font-size:20px;">
                                孙加田
                            </p>
                            <p style="margin-left:70px;margin-top:-30px;">
                                <a href="#" style="color:rgb(0, 140, 255);">添加备注</a>
                            </p>
                        </span>

                        </a></p>
                        <p>江苏省苏州市</a></p>
                        <p>给力度：6.53/10 | 靠谱度：60.86%</a></p>
                        <div style="margin-top:-75px;margin-left:35%;">
                            <span>
                                <div class="form-control" style="width:150px;margin-left:50px;">
                                    <p style="color:rgb(0, 140, 255);padding-left:8px;">
                                        <button style="border:0px;background:white;">查看需求方主页</button></p>
                                    </p>
                                </div>&nbsp;&nbsp;
                                <div class="form-control"
                                    style="background-color:rgb(0, 140, 255);width:150px;margin-left:55%;margin-top:-13%;">
                                    <p style="color:white;padding-left:8px;">
                                        <button style="border:0px;background:rgb(0, 140, 255);">查看需求方主页</button></p>
                                </div>


                            </span>
                        </div>

                    </div>
                </div>
            </div>



            <div>
                <div style="margin:40px 0 0 40px;">
                    <span>

                        <a href="#"> <button style="border:0px; background:white;"> <a
                                    href="#">全选</a></button>&nbsp;&nbsp;
                        </a>

                        <button type="button" onclick="deleteCollUserBat()">合并删除</button></p>
                        <!-- <button >合并删除</button> -->


                    </span>


                </div>

                <div class="container" id="ula" style="margin-top:-46px;">
                    <ul class="pagination" style="margin-left:39%;">
                        <li><a href="#">«</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">»</a></li>
                        <li><a href="#">共2页</a></li>
                        <li><a href="#" style="border: 0px;"></a></li>
                        <li><a href="#">转到</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">页</a></li>
                        <li><button style="margin:4px 0 0 12px;">确定</button></li>
                    </ul>
                </div>


            </div>


        </div>



    </div>


    <!-- 链接 -->
    <div id="forth">
        <!-- 左边 -->
        <div id="forth-left">
            <h5 style="color: #ccc">闲时网客服热线</h5>
            <p id="forth-left-p">400-180-8321</p>
            <p style="color: white">每天09: 00~21: 00</p>
        </div>
        <!-- 中间 -->
        <div id="forth-middle">
            <ul>
                <li style="color: #ccc">闲时网
                    <ul>
                        <li style="margin-top: 20px"><a href="#">关于我们</a></li>
                        <li style="margin-top: 12px"><a href="#">联系我们</a></li>
                        <li style="margin-top: 12px"><a href="#">加入我们</a></li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li style="color: #ccc">帮助中心
                    <ul>
                        <li style="margin-top: 20px"><a href="#">交易规则</a></li>
                        <li style="margin-top: 12px"><a href="#">法律声明</a></li>
                        <li style="margin-top: 12px"><a href="#">常见问题</a></li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li style="color: #ccc">我是需求方
                    <ul>
                        <li style="margin-top: 20px"><a href="#">发布需求</a></li>
                        <li style="margin-top: 12px"><a href="#">要选服务对象</a></li>
                        <li style="margin-top: 12px"><a href="#">需求方入门</a></li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li style="color: #ccc">我是服务方
                    <ul>
                        <li style="margin-top: 20px"><a href="#">服务方入驻</a></li>
                        <li style="margin-top: 12px"><a href="#">浏览全部需求</a></li>
                        <li style="margin-top: 12px"><a href="#">服务方入门</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <!-- 右边  -->
        <div id="forth-right">
            <p style="margin-top: 30px;color: #ccc">联系关注我们呗</p>
            <p style="margin-top: 20px"><a href="#"><img src="../../imgs/QQ图片20190913162259.png" alt="图片加载失败!"></a>
                <a href="#"><img src="../../imgs/QQ图片20190913162435.png" alt="图片加载失败!"></a>
                <a href="#"><img src="../../imgs/QQ图片20190913162519.png" alt="图片加载失败!"></a>
                <a href="#"><img src="../../imgs/QQ图片20190913162606.png" alt="图片加载失败!"></a>
            </p>
        </div>
    </div>





    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="../../plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../../plugins/bootstrap/js/bootstrap.js"></script>

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</body>

</html>